<template>
	<view class="add_order_pay">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'加项支付',color:'#fff'}" />
		<!-- #endif -->
		<view class="project_detail">
			<view class="project_container">
				<view class="project_item" v-for="(item,index) in projectList" :key="index">
					 <view class="image">
					 	<image :src="item.cover" mode=""></image>
					 </view>
					 <view class="content">
					 	<view class="title">{{item.name}} X{{item.projecNum}}</view>
						<view class="price_time">
							<view class="price">￥<font>{{item.price}}</font></view>
							<view class="time">
								<view class="time_image">
									<image src="/static/images/time.png" mode=""></image>
								</view>
								<view class="server_time">
									{{item.duration}}分钟
								</view>
							</view>
						</view>
					 </view>
				</view>
			</view>
			<view class="technician">
				<text>服务技师</text>
				<text>{{technician.name}}</text>
			</view>
			<view class="remake">
				<text>备注</text>
				<input type="text" v-model="remake" style="text-align: right;" placeholder="选填">
			</view>
		</view>
		<view class="pay_mode">
			<view class="pay_title">支付方式</view>
			<view class="mode">
				<view class="pay_mode_item" v-for="(item,index) in payModeList" :key="index">
					<view class="left">
						<view class="image">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{item.payName}}</text>
					</view>
					<radio-group @change="radioChange">
						<label class="radio">
							<radio  :value="item.value" :checked="index === current" />
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="submit">
			<view class="all_price">合计：{{totalPrice.toFixed(2)}}</view>
			<view class="submit_button" @click="paySubmit">支付</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from "weixin-js-sdk"
	// #endif
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				parentId:"",
				projectList:[],  //项目列表
				technician:{},	 //技师信息
				current:0,
				payModeList:[
					{
						value:'0',
						url:'/static/images/orders/yue.png',
						payName:'账户余额',
					},
					{
						value:'1',
						url:'/static/images/orders/wx.png',
						payName:'微信支付',
					},
				],
				totalPrice:0,
				remake:"",   //备注
			};
		},
		onShow() {
			let data = JSON.parse(uni.getStorageSync('addProject'))
			console.log(data)
			this.parentId = data.orderId
			this.projectList = data.project
			this.technician = data.technician
			this.projectList.forEach((item,index)=>{
				this.totalPrice += Number(item.price)*Number(item.projecNum)
			})
		},
		methods:{
			//支付方式单选
			radioChange(e){
				this.payModeList.forEach((item,index)=>{
					if(e.detail.value == item.value){
						this.current = index
					}
				})
			},
			//支付
			paySubmit(){
				uni.showLoading({
					title:'支付中...'
				})
				let arr = []
				this.projectList.forEach((item,index)=>{
					arr.push({
						product_id:item.id,
						num:item.projecNum
					})
				})
				//确认加项订单
				this.$http({
					url:'/api/product/charge_order/confirm',
					method:'post',
					data:{
						order_id:this.parentId,
						products:arr,
					},
					success:result=>{
						// console.log(result,'-----------确认订单')
						if(result.code == 200){
							//创建加项订单
							this.$http({
								url:'/api/product/charge_order/create',
								method:'post',
								data:{
									order_id:this.parentId,
									products:arr,
									pay_type:this.current == 0 ? 'yue' :'weixin',
									user_remark:this.remake
								},
								success:result=>{
									console.log(result,'----------------------123')
									if(result.code == 200){
										uni.removeStorageSync("addProject")
										if(this.current == 0){
											uni.showToast({
												title:'支付成功'
											})
											setTimeout(()=>{
												uni.navigateBack()
											},1500)
										}else{
											var data = result.data.js_config
											// #ifdef H5
											wx.config({
												debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
												appId:data.appId, // 必填，公众号的唯一标识
												timestamp:data.timestamp , // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
												nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
												signType:data.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
												jsApiList: ['invoke'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
											});
											wx.invoke(
												'getBrandWCPayRequest', {
													"appId": data.appId, //公众号ID，由商户传入     
													"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数     
													"nonceStr": data.nonceStr, //随机串     
													"package": data.package,
													"signType": data.signType, //微信签名方式：     
													"paySign": data.paySign, //微信签名 
												}
											)
											// #endif
										}
									}
									uni.hideLoading()
								}
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.add_order_pay{
		width: 100%;
		height: 100%;
		padding-bottom: 70px;
		overflow-y: auto;
		overflow-x: hidden;
		.project_detail{
			margin:20px 12px;
			padding: 0 10px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 5px 8px rgba(0, 0, 0, 0.06);
			>view{
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #eee;
				padding: 0 12px;
			}
			.project_container{
				width: 100%;
				padding: 0;
				display:flex;
				flex-direction: column;
				.project_item{
					width: 100%;
					display: flex;
					padding: 10px 0;
					.image{
						width: 89px;
						height: 89px;
						>image{
							width: 100%;
							height: 100%;
						}
					}
					.content{
						flex: 1;
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.title{
							font-size: 18px;
							color: #2e2e2e;
							font-weight: bold;
						}
						.price_time{
							display: flex;
							align-items:center;
							.price{
								margin-right: 20px;
								color: #fd5c5b;
								font-size: 16px;
								font-weight: bold;
								>font{
									font-size: 20px;
								}
							}
							.time{
								display: flex;
								align-items: center;
								.time_image{
									width: 15px;
									height: 15px;
									margin-right: 5px;
									>image{
										width: 100%;
										height: 100%;
										margin-bottom: 5px;
									}
								}
							}
						}
					}
				}
			}
			.technician{
				height: 50px;
				line-height: 50px;
			}
			.remake{
				height: 50px;
				line-height: 50px;
				border: none;
				align-items: center;
			}
		}
		.pay_mode{
			margin: 35px 12px;
			.pay_title{
				font-size: 18px;
				font-weight: 500;
				color: #707070;
			}
			.mode{
				height: 113px;
				margin: 12px 0;
				border-radius: 8px;
				box-shadow: 0 5px 8px rgba(0, 0, 0, 0.06);
				background-color: #fff;
				display: flex;
				justify-content: space-around;
				flex-direction: column; 
				.pay_mode_item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 5px 10px;
					.left{
						display: flex;
						align-items: center;
						.image{
							width: 32.5px;
							height: 32.5px;
							margin-right: 15px;
							>image{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
					}
				}
			}
		}
	
		.submit{
			width: 100%;
			height: 70px;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			margin-bottom: var(--window-bottom);
			display: flex;
			justify-content: space-between;
			align-items: center;
			>view{
				margin:0 10px ;
			}
			.all_price{
				font-size:20px;
				font-weight: bold;
				color: #fd5c5b;
			}
			.submit_button{
				width: 162px;
				height: 44px;
				line-height: 44px;
				border-radius: 18px;
				background: #24d576;
				color: #fff;
				font-weight: bold;
				font-size: 20px;
				text-align: center;
			}
		}
	}
</style>
